<template>
    <div class="counter-component">
        <div class="counter-btn"  @click="btnmin">-</div>
        <div class="counter-show">
            <input type="text" v-model="number" @keyup="inputHander">
        </div>
        <div class="counter-btn" @click="btnmax">+</div>
    </div>
</template>


<script>
export default {
    data(){
        return{
            number:1
        }
    },
    props:{
        max:{
            type:Number,
            default:5
        },
        min:{
            type:Number,
            default:1
        }
    },
    methods: {
        btnmin(){
            if(this.number<=this.min){
                return
            }
            this.number--
        },
        btnmax(){
            if(this.number>=this.max){
                return
            }
            this.number++
        },
        //输入非数字  
        inputHander(){
            let fix;
            if(typeof this.number==='string'){
                fix=Number(this.number.replace(/\D/g,''))
            }else{
                fix=this.number
            }
            this.number=fix
        }
    },
}
</script>

<style lang="scss" scoped>
.counter-component{
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}
.counter-show{
    float: left;
}
.counter-show input{
    border:none;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    height: 23px;
    line-height: 23px;
    width: 30px;
    outline: none;
    text-indent:4px;
}
.counter-btn{
    border:1px solid #e3e3d3;
    float: left;
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
}
.counter-btn:hover{
    border-color: #4fc08d;
    background:#4fc08d;
    color:#fff;
}
</style>